<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/login.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script>
$(function (){
/*用户名点击去除原有文字*/
	$("input.user").bind({ 
		focus:function(){ 
			if (this.value == this.defaultValue){ 
				this.value=""; 
			} 
			$(this).addClass("active");
		}, 
		blur:function(){ 
			if (this.value == ""){ 
				this.value = this.defaultValue;
			} 
			$(this).removeClass("active");
		} 
	}); 
/*密码框点击去除原有文字并转化为password*/
	$("input.key").bind({ 
		focus:function(){ 
			if (this.value == this.defaultValue){ 
				this.value=""; 
				this.type="password"; 
			} 
			$(this).addClass("active");
		}, 
		blur:function(){ 
			if (this.value == ""){ 
				this.value = this.defaultValue;
				this.type="text"; 
			} 
			$(this).removeClass("active");
		} 
	}); 
/*登录按钮点击效果*/
	$(".input-box button").bind({ 
		mousedown:function(){
			$(this).addClass("active");
		}, 
		mouseup:function(){ 
			$(this).removeClass("active");
		} 
	});
});
</script>
</head>

<body>
<div class="input-box">
	<form>
    	<input class="user" type="text" value="请输入用户名">
    	<input class="key" type="text" value="请输入密码">
        <button type="button" onClick="window.location.href='index.html'">登&nbsp;&nbsp;&nbsp;录</button>
    </form>
    <div class="prompt">用户名或密码不正确，请重新输入!</div>
</div>

</body>
</html>
